<template>
	<!-- <page-meta :page-style="'overflow:'+(show?'hidden':'visible')">
	</page-meta> -->
	<uni-popup ref="popup" background-color="#fff" @change="onPopup">
		<view class="wrapper u-p-30">
			<view class="head">
				<u-search placeholder="搜索" @search="onSearch" @custom="onSearch" v-model="keyword" @clear="onClear">
				</u-search>
			</view>

			<view class="u-flex-1 body">
				<u-collapse ref="collapse" :item-style="{borderBottom:'2rpx solid #ddd'}">
					<u-collapse-item :title="item.label" v-for="(item, index) in TreeList" :key="index">
						<radio-group @change="radioGroupChange">
							<label class="radio-label u-p-l-20  u-p-r-20  u-p-t-6 u-p-b-6  u-m-6 " @click="onLabel(sub)"
								v-for="(sub, ind) in item.children" :key="sub.userId">
								<view class="u-flex">
									<view>
										<radio color="#409EFF" :value="sub.userId" :checked="sub.userId == value" />
									</view>
									<view>{{sub.label}}</view>
								</view>
							</label>
						</radio-group>
					</u-collapse-item>
				</u-collapse>

			</view>

			<view class="u-m-t-20 bottom">
				<HButton @click="onSubmit">确定</HButton>
			</view>
		</view>
	</uni-popup>


</template>
<script>
	import PopUp from '@/components/popup/index.vue'
	import HButton from '@/components/button/index.vue'
	import {
		getUserList
	} from '@/apis/user.js'
	import {
		arrayToTree
	} from "@/common/index.js"
	export default {
		components: {
			PopUp,
			HButton
		},
		props: {
			value: {
				type: [String, Number],
				default: ''
			}
		},


		computed: {
			TreeList() {
				let list = this.filterList.length ? this.filterList : this.list
				const groupData = {};
				for (const i of list) {
					const groupId = i.teamId || 0
					if (groupData[groupId]) {
						groupData[groupId].children.push({
							isParent: false,
							parentId: groupId,
							groupId: groupId,
							userId: i.userId,
							value: `${i.userId}/${i.userName}`,
							label: i.userName,
							key: `${groupId}-${i.userId}`,
						});
					} else {
						groupData[groupId] = {
							groupId: groupId,
							isParent: true,
							key: groupId,
							userId: `${groupId}-${i.userId}`,
							value: `${i.userId}/${i.userName}`,
							label: i.teamName || '无分组',
							children: [{
								isParent: false,
								key: `${groupId}-${i.userId}`,
								parentId: groupId,
								groupId: groupId,
								userId: i.userId,
								value: `${i.userId}/${i.userName}`,
								label: i.userName,
							}],
						};
					}
				}
				return Object.values(groupData);
			}
		},
		model: {
			prop: 'visible',
			event: 'input'
		},
		watch: {
			visible(val) {
				this.$emit('input', val)
			},

		},
		data() {
			return {
				keyword: '',
				radioValue: '',
				checkLabel: {},
				list: [],
				filterList: [],
				show: false
			}
		},



		methods: {
			onLabel(item) {
				console.log(item, '-------onLabel--------');
				this.$set(this.checkLabel, 'value', item.userId)
				this.$set(this.checkLabel, 'name', item.label)
			},
			onSubmit() {
				this.$emit('value', this.checkLabel)
				this.$refs.popup.close()
			},
			async onPopup(ev) {
				try {
					uni.showLoading({
						title: '请求中...',
						mask: true
					})
					this.show = ev.show
					if (ev.show) {
						this.radioValue = ''
						let res = await getUserList()
						if (res.code === 0) {
							this.list = res.body
						}
					} else {
						this.list = []
					}
				} catch (e) {
					//TODO handle the exception
				} finally {
					uni.hideLoading()
				}
			},
			async openPopUp() {
				this.$refs.popup.open('bottom')
			},
			radioGroupChange(ev) {
				this.radioValue = ev.detail.value
			},
			onClear() {
				this.filterList = []
				this.$refs.collapse.init()
			},
			onSearch(val) {
				if (!val) {
					this.onClear()
					return
				}
				this.filterList = this.list.filter((item) => item.userName.indexOf(val) > -1);
				this.$refs.collapse.init()
			}

		},


	}
</script>

<style lang="scss" scoped>
	.wrapper {
		width: 100%;
		background-color: #fff;
		height: 70vh;
		display: flex;
		flex-direction: column;
	}

	.radio {

		&-label {
			display: inline-block;
			border: 2rpx solid #F5F7FA;
			border-radius: 10rpx;
		}
	}

	.head {
		height: 10%;
	}

	.body {
		height: 80%;
		overflow: auto;
	}

	.bottom {
		height: 10%;
	}
</style>
